<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <!-- 页面适配移动端 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>货品箱数计算器</title>
    <style>
        /* 简单样式优化，提升页面可读性 */
        body {
            font-family: Arial, sans-serif;
            max-width: 600px;
            margin: 50px auto;
            padding: 0 20px;
        }
        .container {
            background: #f5f5f5;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        h1 {
            text-align: center;
            color: #333;
            margin-bottom: 30px;
        }
        .input-group {
            margin-bottom: 20px;
        }
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
            color: #555;
        }
        input {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
            font-size: 16px;
        }
        button {
            width: 100%;
            padding: 14px;
            background: #2c3e50;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 18px;
            cursor: pointer;
            margin-top: 10px;
        }
        button:hover {
            background: #34495e;
        }
        #result {
            margin-top: 30px;
            padding: 20px;
            background: white;
            border-radius: 4px;
            border-left: 4px solid #27ae60;
            display: none; /* 初始隐藏结果区域 */
        }
        #result p {
            margin: 10px 0;
            font-size: 17px;
            color: #333;
        }
        .error {
            color: #e74c3c !important;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 页面标题 -->
        <h1>悦时货品箱数与零散瓶数计算</h1>

        <!-- 输入区域：总瓶数 -->
        <div class="input-group">
            <label for="totalBottles">请输入总瓶数：</label>
            <input type="number" id="totalBottles" placeholder="例如：290" min="0">
        </div>

        <!-- 输入区域：每箱规格（每箱瓶数） -->
        <div class="input-group">
            <label for="boxSpec">请输入每箱瓶数（箱规）：</label>
            <input type="number" id="boxSpec" placeholder="例如：30" min="1">
        </div>

        <!-- 计算按钮 -->
        <button onclick="calculateBoxes()">点击计算</button>

        <!-- 结果显示区域 -->
        <div id="result">
            <p id="resultContent"></p>
        </div>
    </div>

    <script>
        // 计算箱数和零散瓶数的核心函数
        function calculateBoxes() {
            // 1. 获取输入框的值，并转为数字类型
            const totalBottles = Number(document.getElementById('totalBottles').value);
            const boxSpec = Number(document.getElementById('boxSpec').value);
            
            // 2. 获取结果显示相关元素
            const resultDiv = document.getElementById('result');
            const resultContent = document.getElementById('resultContent');
            
            // 3. 输入合法性校验（避免0或负数箱规、空输入）
            if (isNaN(totalBottles) || totalBottles < 0) {
                resultContent.innerHTML = '<span class="error">输入错误！总瓶数需为非负数字（如0、50、290）。</span>';
                resultDiv.style.display = 'block'; // 显示错误提示
                return;
            }
            if (isNaN(boxSpec) || boxSpec < 1) {
                resultContent.innerHTML = '<span class="error">输入错误！每箱瓶数需为大于0的数字（如1、30）。</span>';
                resultDiv.style.display = 'block'; // 显示错误提示
                return;
            }
            
            // 4. 核心计算：整除求完整箱数，取余求零散瓶数
            const fullBoxes = Math.floor(totalBottles / boxSpec); // 向下取整（确保是最大完整箱数）
            const remainingBottles = totalBottles % boxSpec; // 取余数（剩余零散瓶数）
            
            // 5. 拼接并显示结果
            resultContent.innerHTML = `
                总瓶数：<strong>${totalBottles}</strong> 瓶<br>
                每箱规格：<strong>${boxSpec}</strong> 瓶/箱<br>
                完整箱数：<strong>${fullBoxes}</strong> 箱<br>
                零散瓶数：<strong>${remainingBottles}</strong> 瓶
            `;
            resultDiv.style.display = 'block'; // 显示正确结果
        }
    </script>
</body>
</html>